<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body, label, div {
            font-family: "Microsoft YaHei";
        }

        body {
            width: 830px;
            height: 530px;
            margin: 0;
            padding: 0;
            background: #eeeeee;
        }

        div {
            display: block;
        }

        label {
            display: inline-block;
        }

        .default-label {
            border-radius: 5px;
            padding: 5px 20px;
            margin: 5px;
        }

        .some-btn {
            display: inline-block;
            outline: none;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            font: 14px/100% Arial, Helvetica, sans-serif;
            padding: .5em 2em .55em;
            text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
            -webkit-border-radius: .5em;
            -moz-border-radius: .5em;
            border-radius: .5em;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

            background: #3399FF;
            color: #ededed;
        }

        .some-btn:hover {
            text-decoration: none;
        }

        .some-btn:active {
            position: relative;
            top: 1px;
        }

        .label-title {
            font-weight: 700;
            font-size: 18px;
            margin: 10px 20px;
        }

        input[userType="text"] {
            -web-kit-appearance: none;
            -moz-appearance: none;
            height: 35px;
            width: 300px;
            border-radius: 4px;
            border: 1px solid #c8cccf;
            color: #333;
            outline: 0;
            text-decoration: none;
            box-sizing: border-box;
            padding: 0 1em;
        }
    </style>

    <script src="js/jquery.min.js"></script>

    <script type="text/javascript">
        // 存放科室信息
        var g_dept;
        // 存放检查室信息
        var g_checkRoom;
        // 配置文件信息
        var g_properties;

        /**
         * 页面初始时获取科室和检查室信息
         */
        window.onload = function () {
            // 获取所有科室信息
            getDept();
            // 获取所有检查室信息
            getCheckRoom();
        };

        // /**
        //  * 捕获异常
        //  */
        // window.onerror = function(){
        //     alert(arguments[0]);
        //     // 阻止在控制台中打印错误信息
        //     return true;
        // };

        /**
         * 读取配置信息
         */
        $(document).ready(function () {
            //定时执行，2秒后执行
            var t1 = window.setTimeout(refreshCount, 1000 * 2);

            function refreshCount() {
                document.getElementById("wait-start").style.display = "none";
                document.getElementById("show-div").style.display = "block";
                // 获取配置文件信息
                getClientProperties();
                //去掉定时器
                window.clearTimeout(t1);
            }
        });

        /**
         * 获取所有科室信息
         */
        function getDept() {
            $.ajax({
                url: "/sys/dept/info",
                type: "get",
                dataType: "json",
                success: function (data) {
                    var str = eval(data);
                    var msg = str.data;
                    // 保存到全局变量
                    window.g_dept = msg;
                    var htmlStr = "";
                    for (var i = 0; i < msg.length; i++) {
                        htmlStr += "<label class=default-label style='display: inline-block' " +
                            "for='dept" + msg[i].departmentId + "' >" +
                            "<input userType=radio name=checkroom " +
                            "onclick=\"chickSomeDept('" + msg[i].departmentId + "')\" " +
                            "userId='dept" + msg[i].departmentId + "' " +
                            "value='" + msg[i].departmentId + "' />" + msg[i].departmentId +
                            "</label>";
                    }
                    document.getElementById("dept").innerHTML = htmlStr;
                },
                error: function (error) {
                    alert("获取科室信息失败")
                }
            });
        }

        /**
         * 获取所有检查室信息
         */
        function getCheckRoom() {
            $.ajax({
                url: "/sys/checkRoom/info",
                type: "get",
                dataType: "json",
                success: function (data) {
                    var str = eval(data);
                    var msg = str.data;
                    // 保存到全局变量
                    window.g_checkRoom = msg;
                    var htmlStr = "";
                    for (var i = 0; i < msg.length; i++) {
                        htmlStr += "<label class='default-label' style='display: none' " +
                            "userId='checkLabel" + msg[i].checkRoomId + "' " +
                            "for='check" + msg[i].checkRoomId + "' >" +
                            "<input userType=checkbox  name=checkroom " +
                            "onclick=\"chickSomeCheck('" + msg[i].checkRoomId + "')\" " +
                            "value='" + msg[i].checkRoomId + "' " +
                            "userId='check" + msg[i].checkRoomId + "' />" + msg[i].checkRoomName +
                            "</label>";
                    }
                    document.getElementById("checkRoom").innerHTML = htmlStr;
                },
                error: function () {
                    alert("获取检查室信息失败");
                }
            });
        }

        /**
         * 点击了某个科室
         */
        function chickSomeDept(deptId) {
            var dom = document.getElementById("dept" + deptId);
            if (dom.checked) {
                showCheck(deptId, true);
            } else {
                showCheck(deptId, false);
            }
        }

        /**
         * 点击某个客户端
         */
        function chickSomeCheck(checkRoomId) {
            // 呼叫客户端
            if (window.g_properties.clientType == '0') {
                var _checkRoom = window.g_checkRoom;
                console.log(_checkRoom)
                var deptId;
                for (var i = 0; i < _checkRoom.length; i++) {
                    if (_checkRoom[i].checkRoomId == checkRoomId) {
                        deptId = _checkRoom[i].departmentId;
                        break;
                    }
                }
                for (var i = 0; i < _checkRoom.length; i++) {
                    if (_checkRoom[i].departmentId == deptId) {
                        if (_checkRoom[i].checkRoomId != checkRoomId) {
                            document.getElementById("check" + _checkRoom[i].checkRoomId).checked = false;
                        }
                    }
                }
            }
        }

        /**
         * 根据科室ID, 决定是否显示检查室信息
         * @param deptId
         */
        function showCheck(deptId) {
            // 获取所有检查室信息
            var checkRoom = window.g_checkRoom;
            // 遍历检查室
            for (var i = 0; i < checkRoom.length; i++) {
                // 如果属于该科室
                if (checkRoom[i].departmentId == deptId) {
                    document.getElementById("checkLabel" + checkRoom[i].checkRoomId).style.display = "inline-block";
                } else {
                    document.getElementById("checkLabel" + checkRoom[i].checkRoomId).style.display = "none";
                    document.getElementById("check" + checkRoom[i].checkRoomId).checked = false;
                }
            }
        }

        /**
         * 调用JAVA获取客户端配置信息
         */
        function getClientProperties() {
            try {
                // var properties = app.getClientProperties();
                var properties = "{\"clientType\":\"0\",\"clientId\":\"86e28557-dbe7-46b4-bf5c-174c4b038a00\",\"clientName\":\"放射科\",\"deptId\":\"放射科\",\"checkRoomId\":\"CT一室\"}";
                var _properties = eval("(" + properties + ")");
                window.g_properties = _properties;
                // 客户端类型
                if (_properties.clientType == "0") {
                    document.getElementById("clientType").innerHTML = "呼叫客户端";
                } else if (_properties.clientType == "1") {
                    document.getElementById("clientType").innerHTML = "显示客户端";
                } else if (_properties.clientType == "2") {
                    document.getElementById("clientType").innerHTML = "打印客户端";
                }
                // 客户端名称
                if (_properties.clientName != null) {
                    document.getElementById("clientName").value = _properties.clientName;
                }
                setValueByProperties(_properties);
            } catch (e) {
                alert("读取配置文件时出错");
            }
        }

        /**
         * 根据配置文件勾选已选科室
         */
        function setValueByProperties(properties) {
            try {
                // 已选择科室信息
                if (properties.deptId != null) {
                    var selectDept = properties.deptId.split(",");
                    for (var i = 0; i < selectDept.length; i++) {
                        var dom = document.getElementById("dept" + selectDept[i]);
                        if (dom != null) {
                            dom.checked = true;
                        }
                        showCheck(selectDept[i]);
                    }
                }
                // 已选择检查室信息
                if (properties.checkRoomId != null) {
                    var selectCheck = properties.checkRoomId.split(",");
                    for (var i = 0; i < selectCheck.length; i++) {
                        var dom = document.getElementById("check" + selectCheck[i]);
                        if (dom != null) {
                            dom.checked = true;
                        }
                    }
                }
            } catch (e) {
                alert(e.toString());
                // setValueByProperties(properties);
            }
        }

        /**
         * 保存客户端配置信息，发送到服务器并调用JAVA保存在本地配置文件中
         */
        function saveClientProperties() {
            // 查找到已经选择的科室信息
            var depts = window.g_dept;
            var select_dept = "";
            for (var i = 0; i < depts.length; i++) {
                if (document.getElementById("dept" + depts[i].departmentId).checked) {
                    select_dept = depts[i].departmentId;
                }
            }

            // 查找到已选择的检查室信息
            var checks = window.g_checkRoom;
            var select_check = "";
            for (var i = 0; i < checks.length; i++) {
                if (document.getElementById("check" + checks[i].checkRoomId).checked) {
                    select_check += checks[i].checkRoomId + ",";
                }
            }
            select_check = select_check.substring(0, select_check.lastIndexOf(","));
            // 读取客户端名称
            var clientName = document.getElementById("clientName").value;
            // 读取客户端类型
            var clientType = window.g_properties.clientType;
            // 读取客户端编号
            var _clientId = window.g_properties.clientId;
            // 发送保存请求
            $.ajax({
                // url: "/sys/client/add",
                url: "/sys/client/enter",
                type: "post",
                dataType: "json",
                data: {
                    clientId: _clientId,
                    ClientName: clientName,
                    ClientType: clientType,
                    ClientByDeptId: select_dept,
                    ClientByCheckId: select_check
                },
                success: function (data) {
                    var _data = eval(data);
                    var clientId = _data.data.clientId;
                    var clientPageURL = _data.data.clientPageURL;
                    app.saveClientProperties(clientId, clientName, select_dept, select_check, clientPageURL);
                },
                error: function (data) {
                    alert("更新客户端信息失败");
                }
            });
        }
    </script>

</head>
<body>
<div id="wait-start">
    页面加载中...
</div>
<div id="show-div" style="display: none">
    <div>
        <label class="label-title">客户端类型</label>
        <label id="clientType"></label>
    </div>
    <div>
        <label class="label-title">客户端名称</label>
        <input type="text" id="clientName"/>
    </div>
    <div>
        <label class="label-title">所属科室</label>
        <div id="dept" style="margin: 0 0 0 20px"></div>
    </div>
    <div style="min-height: 100px">
        <label class="label-title">所属检查室</label>
        <div id="checkRoom" style="margin: 0 0 0 20px"></div>
    </div>
    <div>
        <button style="margin: 0 20px" class="some-btn" onclick="saveClientProperties()">保存</button>
    </div>
</div>
</body>
</html>